<template>
    <div class="layout-container">
        <el-container v-loading="loading">
            <el-main>
                <Map v-if="loadFinished" :gardenList="gardenList" @clickProvince="provinceClick" />
            </el-main>

            <el-aside>
                <div class="pies">
                    <PieType v-if="loadFinished" ref="refPieType" :gardenList="gardenList" :province="province" style="width: 100%;height: 100%" />
                    <PieSize v-if="loadFinished" ref="refPieSize" :gardenList="gardenList" :province="province" style="width: 100%;height: 100%" />
                </div>
            </el-aside>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import Map               from "./map/index.vue"
import PieSize           from "@/views/main/dashboard/info/pieSize/index.vue"
import PieType           from "@/views/main/dashboard/info/pieType/index.vue"
import {list as getList} from "@/api/garden"
import {onMounted, ref}  from "vue";

let province              = ref("全国")
let sourceGardenList: any = []
let gardenList            = ref([])
let loading               = ref(false)
let loadFinished          = ref(false)

/**
 * 加载数据
 */
function loadData() {
    return new Promise(resolve => {
        loading.value      = true
        loadFinished.value = false

        getList().then(res => {
            sourceGardenList = res?.data
            gardenList.value = Object.assign([], sourceGardenList)
        }).then(resolve).finally(() => {
            loading.value      = false
            loadFinished.value = true
        })
    })
}

/**
 * 切换行省
 * @param name
 */
function provinceClick(name: any) {
    province.value = name
}

// --------------------------- 生命函数 ---------------------------
onMounted(() => {
    loadData()
})

</script>

<style lang="scss" scoped>
.pies {
    height: 100%;
    display: flex;
    flex-direction: column;
}
</style>
